<template>
	<view>
		<view class="nav_fixed_top bg-zhuse flex align-center justify-between padding-30">
			<image @click="goBack()" src="../../static/img/back_f.png" style="width: 32rpx;height: 32rpx;"></image>
			<view @click="showMutibleDate = true" style="background: rgba(255,255,255,0.2);"
				class="padding-x-24 flex1 flex align-center justify-between margin-left-30 radius60">
				<input v-model="date" disabled  type="text" class="fs-24 color-fff flex1" style="height: 60rpx;" placeholder="可进行天/月/季度/年度查询">
				<image src="../../static/img/date.png" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>
		<view class="padding-x-24 bg-f7f7f7 padding-y-30 flex align-center fw-600">
			<view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view>
			<text class="fs-30 color-333 margin-left-16">积分抵扣明细</text>
		</view>
		<view class="padding-x-20 padding-y-30">
			<view v-if="list.length > 0" class="solid">
				<view class="flex align-center justify-between solid-bottom">
					<view class="w40 padding-y-30 solid-right"></view>
					<view class="w25 text-center padding-y-30 fs-24 color-333 solid-right">商家编号</view>
					<view class="w25 text-center padding-y-30 fs-24 color-333 solid-right">消费金额</view>
					<view class="w25 text-center padding-y-30 fs-24 color-333 solid-right">抵扣积分</view>
					<view class="w25 text-center padding-y-30 fs-24 color-333">抵扣金额</view>
				</view>
				<view v-for="(item,index) in list" :key='index' class="flex align-center justify-between solid-bottom">
					<view class="w40 padding-y-36 solid-right text-center flex align-center flex-direction justify-center">
						<view class="text-cut fs-26 color-333">消费抵扣</view>
						<view class="fs-20 color-999">{{item.create_time}}</view>
					</view>
					<view class="w25 text-center padding-y-36 fs-24 color-666 text-cut solid-right">{{item.shop_id}}</view>
					<view class="w25 text-center fw-600 padding-y-36 fs-24 color-zhuse solid-right">{{item.amount}}</view>
					<view class="w25 text-center fw-600 padding-y-36 fs-24 color-666 solid-right">{{item.points}}</view>
					<view class="w25 text-center fw-600 padding-y-36 fs-24 color-zhuse solid-right">{{item.points_amount}}</view>
				</view>
				
			</view>
			
			<empty style="position: relative;top: 120px;" v-if="list.length < 1"></empty>
			
			
		</view>
		
		<date-range mode="date" :showMutibleDate="showMutibleDate" :startDate="startDate" :endDate="endDate"
			 @onSelected="dateSelected"></date-range>
		
	</view>
</template>

<script>
	import dateRange from 'components/zxp-datepickerRange/zxp-datepickerRange.vue'
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				startDate: '2021-12-01',
				endDate: '2022-12-30',
				q: {
					start_time: "",
					end_time: "",
					page: 1
				},
				total: 0,
				hasMore: true,
				loadStatus: '',
				list: [],
				date:'',
				showMutibleDate: false,
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			getList() {
				this.isLoading = true;
				this.$api.points_discount(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			dateSelected: function(e) {
				console.log(e)
				if (e) {
					this.q.start_time = e.start
					this.q.end_time = e.end
					this.date = e.start +'至' + e.end
				}
				/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
				this.showMutibleDate = false;
				this.list = [];
				this.q.page = 1;
				this.getList();
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.uni-input-placeholder {
		color: #fff;
	}
	.w40{width: 40%;}
	.w15{width: 15%;}
	.h86{height:90rpx;line-height: 90rpx;}
</style>
